<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<div id="demo">
		<button @click="destoryVm">点我控制它</button>
		
		<!-- 该标签的文本默认每隔2秒显示一次 -->
		<p v-show="isShow">Hello Vue.js</p>
	</div>
	
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
	/* 
		Vue的生命周期
	 */
	const vm = new Vue({
		el:'#demo',
		data:{
			isShow:true
		},
		mounted () { // 初始化显示之后立即调用(1次)
		
		// 页面初始化的时候设置定时器,让p标签的内容每隔2秒显示一次
		this.intervalId = setInterval(() => {
				console.log("-------------");
				this.isShow = !this.isShow;
			}, 2000);
		},
		methods: {
			destoryVm () {
				this.$destroy(); // 干掉vm,仅仅是干掉了vm,但是定时器并没有清除掉
			}
		},
		beforeDestroy() { // vm死亡之前调用一次
			clearInterval(this.intervalId); // 清除定时器
		}
		
	});
</script>
</body>
</html>
